<template>
    <div class="productDefinition">
        <!-- 动态表单 -->
        <dynamic-form :formDataList='formDataList' @getFormData='getFormData'></dynamic-form>

        <!-- 按钮操作 -->
        <custom-setbtn>
            <template #l_btn>
                <div class="l_btn">
                    <el-button type="primary" size="mini" icon="el-icon-circle-plus-outline" @click="createProduction">
                        创建产品</el-button>
                    <el-popover placement="bottom" trigger="click" popper-class='batchPoper'>
                        <div class='operateBtn'>
                            <el-button type="text" size="mini" icon="el-icon-delete" @click='batchDel'>批量删除</el-button>
                            <el-button type="text" size="mini" icon="el-icon-printer" @click="handlePrint(selection)">
                                批量打印</el-button>
                        </div>
                        <el-button type="primary" size="mini" icon="el-icon-s-operation" :disabled='disabled'
                            slot="reference" style='margin:0 10px'>批量操作
                        </el-button>
                    </el-popover>
                    <el-button type="primary" size="mini" icon="el-icon-download" plain @click='importModel'>导入
                    </el-button>
                    <el-button type="primary" size="mini" icon="el-icon-upload2" plain @click='getExportProduct'
                        :disabled="tableList.length <= 0">导出</el-button>
                    <el-button type="text" size="mini" icon="el-icon-document" @click="viewImportLog">查看导入日志</el-button>
                </div>
            </template>
            <template #r_btn>
                <div class="r_btn">
                    <!-- 列配置表格 -->
                    <pop-checkbox :disposeGroup='disposeGroup' @handleChangeDiposeGroup='handleChangeDiposeGroup'>
                    </pop-checkbox>
                </div>
            </template>
        </custom-setbtn>

        <!-- 表格 -->
        <tableList :tableGroup='tableGroup' :searchForm='formDataList.searchForm' :tableList='tableList' :menu='menu'
            @tableListChecked='tableListChecked' @getTableData='getTableData' ref='tableList'
            @delTableData='delTableData' @handlePrint='handlePrint' @batchRowInfo='batchRowInfo'>
        </tableList>

        <!-- 批量删除 -->
        <el-dialog :visible.sync="batchDelVisible" width="416px" :show-close='false'>
            <span style="display:flex">
                <span class='el-icon-warning-outline' style="color:#faad14;font-size:22px;margin-right:10px"></span>
                删除后数据无法恢复，确定删除吗?
            </span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="batchDelVisible = false">取 消</el-button>
                <el-button type="primary" @click="getBaseDel">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 导入 -->
        <import-mould title='产品' ref='importMould' @importSuccess="importSuccess"></import-mould>

        <!-- 打印模板 -->
        <print-mould ref="print" :mouldInfo='mouldInfo'></print-mould>
    </div>
</template>

<script>
    import dynamicForm from '@/components/dynamicForm'
    import tableList from '../components/tableList'
    import fileDownload from "js-file-download";
    import request from '@/utils/request'
    import printMould from './printMould.vue'
    import {
        productList,
        productHandle,
        baseDel,
        exportProduct
    } from '@/api/baseController'
    import {
        productColumns
    } from '@/api/customFieldController'
    export default {
        data() {
            return {
                name: 'form',
                disabled: true,
                // 表单项
                formDataList: {
                    formGroup: [{
                            label: 'code',
                            name: '产品编号',
                            prop: '',
                            placeholder: '请输入产品编号',
                            key: 'srk'
                        },
                        {
                            label: 'name',
                            name: '产品名称',
                            prop: '',
                            placeholder: '请输入产品名称',
                            key: 'srk'
                        },
                        {
                            label: 'specification',
                            name: '产品规格',
                            prop: '',
                            placeholder: '请输入产品规格',
                            key: '',
                            key: 'srk'
                        }
                    ],
                    searchForm: {
                        code: '',
                        name: '',
                        specification: '',
                        limit: 10,
                        page: 1
                    },
                    formSet: true,
                    type: 'product',
                    batchDelData: []
                },
                disposeGroup: [],
                tableGroup: [],
                tableList: [],
                // 当前页
                menu: '产品定义',
                batchDelVisible: false,
                disabledExport: true,
                mouldInfo: [],
                selection: []
            }
        },
        components: {
            dynamicForm,
            tableList,
            printMould
        },
        watch: {
            tableList(list) {
                //当表格数据为空时 列配置和表头无自定义字段信息
                if (list.length <= 0) {
                    this.tableGroup = this.utils.filterCustomFields(this.tableGroup)
                    this.disposeGroup = this.utils.filterCustomFields(this.disposeGroup)
                }
            }
        },
        mounted() {
            this.getProductColumns({type: 'product'})
            .then(()=>{
                this.getTableData(this.formDataList.searchForm)
            })
            this.$nextTick(() => {
                this.$refs.tableList.onloadLogin(true)
            })
        },
        methods: {
            getProductColumns: async function(data){
                const res = await productColumns(data)
                if (res.code == 200) {
                    this.disposeGroup = []
                    this.tableGroup = []
                    res.data.map((item, i) => {
                        const key = {
                            index:'80',
                            code:'155',
                            specification:'70',
                            processRouteName:'80',
                            unitName:'50',
                            stock:'70',
                            createTime:'145',
                            createName:'60',
                            updateTime:'145',
                            maximum:'70',
                            minimum:'70',
                            safe:'70',
                            attribute:'70'
                        }
                        let width = key[item.name] ?? '180'
                        if (item.state) {
                            this.tableGroup.push({
                                label: item.name,
                                name: item.chineseName,
                                width
                            })
                        }
                        this.disposeGroup.push({
                            label: item.name,
                            name: item.chineseName,
                            state: item.state
                        })
                    })
                }
            },
            //监视复选框值变化
            handleChangeDiposeGroup(disposeGroup) {
                let configureList = []
                configureList = disposeGroup.map(i => {
                    return {
                        name: i.label,
                        chineseName: i.name,
                        state: i.state
                    }
                })
                this.getProductColumns({
                    type: 'product',
                    configureList
                }).then(()=>{
                    this.$refs.tableList.changeLayout() //防止改变table列配置出现抖动
                })
            },
            viewImportLog() {
                this.$router.push({
                    path: '/basicData/productDefinition/loadLog',
                    query: {
                        name: '产品定义'
                    }
                })
            },
            createProduction() {
                this.$router.push({
                    path: '/basicData/createOrder',
                    query: {
                        name: '产品定义'
                    }
                })
            },
            // 表格内容勾选
            tableListChecked(arr, page) {
                this.formDataList.searchForm.page = page
                this.batchDelData = arr.join(',')
                if (arr.length > 0) {
                    this.disabled = false
                } else {
                    this.disabled = true
                }
            },
            // 表格数据
            getTableData(data) {
                productList(data).then(res => {
                    if (res.code == 200) {
                        this.tableList = res.data.records;
                        this.tableList.map((item, i) => {
                            item.index = (res.data.current - 1) * 10 + (i + 1)
                            if (item.customFieldVos != null) {
                                item.customFieldVos.map(k => {
                                    item[k.customFieldId] = k.customFieldMess.fieldType ==
                                        'selectChecked' ? JSON.parse(k.value).join(',') : k
                                        .value,
                                        item.customType = k.customFieldMess.fieldType
                                })
                            }
                        })
                        this.$refs.tableList.totalNum(res.data.total)
                        this.$refs.tableList.onloadLogin(false)
                    }
                })
            },
            //点击查询获取表单数据
            getFormData(val) {
                val.page = 1
                this.formDataList.searchForm = val
                this.getTableData(val)
            },
            // 表格数据删除
            delTableData(data, page) {
                this.formDataList.searchForm.page = page
                productHandle(data).then(res => {
                    if (res.code == 200) {
                        this.utils.showMsg('删除成功', 'success')
                        this.getTableData(this.formDataList.searchForm)
                    } else if (res.code == 500) {
                        // this.utils.showMsg(res.message,'error')
                        this.getTableData(this.formDataList.searchForm)
                    }
                })
            },
            // 批量删除
            batchDel() {
                this.batchDelVisible = true
            },
            getBaseDel() {
                let data = {
                    type: 0,
                    ids: this.batchDelData
                }
                this.batchDelVisible = false
                baseDel(data).then(res => {
                    if (res.code == 200) {
                        let str = res.data.substring(res.data.indexOf('败'))
                        let n = str.substring(2, str.length - 2)
                        if (n == 0) {
                            this.utils.showMsg(res.data, 'success')
                        } else {
                            this.utils.showMsg(res.data, 'error')
                        }
                        this.getTableData(this.formDataList.searchForm)
                        this.$refs.tableList.clearSel()
                    }
                })
            },
            handlePrint(payload) {
                this.mouldInfo = payload.map(i => {
                    return {
                        name: i.name,
                        code: i.code,
                        specification: i.specification,
                        unitName: i.unitName,
                        stock: i.stock,
                        qr: i.qr
                    }
                })
                this.$refs.print.$el.children[0].click()
            },
            batchRowInfo(selection) {
                this.selection = selection
            },
            // 导入
            importModel() {
                let obj = {
                    type: 'product',
                    importUrl: '/base/product_import',
                    isCover: true
                }
                this.$refs.importMould.openDialog(obj)
            },
            // 导入成功
            importSuccess() {
                this.getTableData(this.formDataList.searchForm)
            },
            // 导出
            getExportProduct() {
                this.$refs.tableList.getTableData('产品定义' + new Date().dateFormat('yyyyMMddhhmmss'),
                    '/base/product_list', '0', this.formDataList.searchForm)
                // exportProduct({}).then(res => {
                //     fileDownload(res, '产品定义' + new Date().dateFormat('yyyyMMddhhmmss') + '.xlsx', 
                //         'application/vnd.ms-excel;charset=UTF-8')
                // })
            },
        }
    }
</script>

<style lang="less" scoped>
    .productDefinition {
        overflow: auto;
    }
</style>